﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>景区周边</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link href="/admin/skin/default/style.css" rel="stylesheet" type="text/css" />
    <link href="/admin/skin/mystyle.css" rel="stylesheet" type="text/css" />
    <link href="/css/weui/weui.min.css" rel="stylesheet" />
    <link href="/css/weui/weui.example.css" rel="stylesheet" />
    <script src="/scripts/jquery/jquery-1.10.1.min.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=PHPBZ-6H7AQ-HGF5W-GJ72M-MUNQZ-ZHFPD"></script>
    <script>
        var geocoder, map, markers, searchService, label, cityservice = [];
        var markerArray = [];

        function init() {
            var container = document.getElementById("container");
            map = new qq.maps.Map(container, {
                zoom: 10
            });
            label = new qq.maps.Label({
                map: map,
                offset: new qq.maps.Size(15, -12),
                draggable: false,
                clickable: false
            });
            cityservice = new qq.maps.CityService({
                complete: function (result) {
                    curCity.children[0].innerHTML = result.detail.name;
                    map.setCenter(result.detail.latLng);
                }
            });

            //setpano('10011501120802180635300');




            alert(pano_container.style["display"]);
            pano_container.style["display"] = "inline";

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
            else {
                alert('您的浏览器不支持定位，请按地点查询。目前显示承德避暑山庄地图');
                getlocbyadd('承德避暑山庄');
            }
            geocoder = new qq.maps.Geocoder({
                complete: function (result) {
                    map.setCenter(result.detail.location);
                    var marker = new qq.maps.Marker({
                        map: map,
                        position: result.detail.location
                    });
                }
            });
        }

        //根据地名设置地图中心
        function setpano(id,title)
        {
            var pano_container = document.getElementById('PanoCtn');	//街景容器
            var pano = new qq.maps.Panorama(pano_container, {
                pano: id,	//场景ID
                pov: {	//视角
                    heading: 1,	//偏航角
                    pitch: 0		//俯仰角
                },
                zoom: 1,		//缩放
            })
            var pano_container = document.getElementById('PanoContent');
            $('#PanoTitle').text(title);
            pano_container.style["display"] = "inline";
        }

        function hidecontent()
        {
            var pano_container = document.getElementById('PanoContent');
            pano_container.style["display"] = "none";
        }


        function setAnchor(marker, flag) {
            var left = marker.index * 27;
            if (flag == true) {
                var anchor = new qq.maps.Point(10, 30),
                        origin = new qq.maps.Point(left, 0),
                        size = new qq.maps.Size(27, 33),
                        icon = new qq.maps.MarkerImage("/images/marker10.png", size, origin, anchor);
                marker.setIcon(icon);
            } else {
                var anchor = new qq.maps.Point(10, 30),
                        origin = new qq.maps.Point(left, 35),
                        size = new qq.maps.Size(27, 33),
                        icon = new qq.maps.MarkerImage("/images/marker10.png", size, origin, anchor);
                marker.setIcon(icon);
            }
        }


        var url2;
        function getselected() {
            var keyword = document.getElementById("select").value;
            if (keyword == '我的位置')
            {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                }
                else {
                    alert('您的浏览器不支持定位，请按地点查询。目前显示承德避暑山庄地图');
                    getlocbyadd('承德_避暑山庄');
                }
                return;
            }
            else if (keyword != '')
            {
                url2 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?region=" + keyword + "+&address=" + keyword + "&key=PHPBZ-6H7AQ-HGF5W-GJ72M-MUNQZ-ZHFPD&output=jsonp&&callback=?");
                $.getJSON(url2, function (result) {
                    map.setCenter(new qq.maps.LatLng(result.result.location.lat, result.result.location.lng));
                    map.setZoom(15);

                });
            }
        };

        var url22;
        var listener_arr = [];
        function getselectedandregion() {
            //setpano('10011501120802180635300');
            var keyword = document.getElementById("txtkeyword").value;;
            var address =document.getElementById("select").value;;
            if (keyword == '') {
                getselected();
                return;
            }
            var urladd = 'http://apis.map.qq.com/ws/geocoder/v1/?address=' + address + '&key=PHPBZ-6H7AQ-HGF5W-GJ72M-MUNQZ-ZHFPD';
            
            var result;
            $.ajax({
                url: 'scenic.ashx?action=geturl',
                dataType: 'json',
                data: { url: urladd },
                success: function (data) {
                    map.setCenter(new qq.maps.LatLng(data.result.location.lat, data.result.location.lng));
                    map.setZoom(15);
                    var urlsearch;
                    urlsearch = encodeURI("http://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" + data.result.location.lat + "," + data.result.location.lng + ",4000)" + "&keyword=" + keyword + "&key=PHPBZ-6H7AQ-HGF5W-GJ72M-MUNQZ-ZHFPD&output=jsonp&&callback=?");
                    $.getJSON(urlsearch, function (result) {
                        if (result.count) {
                            //isNoValue = false;
                            //bside.innerHTML = "";
                            $(markerArray).each(function (n, ele) {
                                ele.setMap(null);
                            });
                            //alert(0);
                            //markerArray.length = 0;

                            var dat = result.data;
                            $(dat).each(function (n, ele) {
                                var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
                                //latlngBounds.extend(latlng);
                                var left = n * 27;
                                var marker = new qq.maps.Marker({
                                    map: map,
                                    position: latlng,
                                    zIndex: 10
                                });
                                marker.index = n;
                                marker.isClicked = false;
                                setAnchor(marker, true);
                                markerArray.push(marker);
                                var panoid = ele.pano? ele.pano.id :null;
                                var panotitle = ele.title;

                                //soso.maps.Event.addListener(marker, 'click', function () {
                                //    info.open('<div style="width:280px;height:100px;">' +
                                //        results.address + '</div>',
                                //        marker
                                //    );
                                //});
                                var listener1 = qq.maps.event.addDomListener(marker, "click", function () {
                                    var n = this.index;
                                    if (panoid) {
                                        setpano(panoid, panotitle);
                                    }
                                    else
                                    {
                                        alert('抱歉，未有' + panotitle + '景点图。');
                                    }

                                });

                            });

                        } else {

                            $(markerArray).each(function (n, ele) {
                                ele.setMap(null);
                            });
                            alert('抱歉，'+address+'附近没有'+keyword);
                        }
                    });


                },
                error: function (msg) {

                }
            });

            

            for (var i = 0, l = listener_arr.length; i < l; i++) {
                qq.maps.event.removeListener(listener_arr[i]);
            }
            listener_arr.length = 0;


            // curCity.children[0].innerHTML = target.innerHTML;
           // url22 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?region=" + keyword + "+&address=庙&key=PHPBZ-6H7AQ-HGF5W-GJ72M-MUNQZ-ZHFPD&output=jsonp&&callback=?");
                      

           

        };

        function searchByStationName() {
            var keyword = document.getElementById("select").value;
            alert(keyword);
            geocoder.getLocation(keyword);
        }

        function showPosition(position) {
            var myLatLng = new soso.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.zoomTo(13);
            map.moveTo(myLatLng);
        }


        function searchKeyword() {
            var keyword = document.getElementById("keyword").value;
            if (keyword == '')
            {
                getselected();
                return;
            }

            var region = document.getElementById("select").value;
            
            clearOverlays(markers);
            var searchRequest = {
                'keyword': keyword,
                'region': region
            };
            var latlngBounds = new soso.maps.LatLngBounds();
            searchService.search(searchRequest, function (results, status) {
                if (status == soso.maps.SearchStatus.OK) {
                    var pois = results.pois;
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        latlngBounds.extend(poi.latLng);
                        var marker = new soso.maps.Marker({
                            map: map,
                            position: poi.latLng
                        });

                        var decor = new soso.maps.MarkerDecoration({
                            content: i + 1,
                            margin: new soso.maps.Size(0, -4),
                            align: soso.maps.ALIGN.CENTER,
                            marker: marker
                        });
                        markers.push(marker);
                    }
                    map.fitBounds(latlngBounds);
                } else {
                    alert("检索没有结果，原因: " + status);
                }
            });
        }



        function clearOverlays(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
        }

        //function searchByStationName() {
        //    //清空原来的标注
        //    map.clearOverlays();
        //    var keyword = document.getElementById("select").value;
        //    if (keyword == "") { return; }
        //    localSearch.setSearchCompleteCallback(function (searchResult) {
        //        var poi = searchResult.getPoi(0);

        //        map.centerAndZoom(poi.point, 18);
        //        // 创建标注，为要查询的地方对应的经纬度
        //        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
        //        map.addOverlay(marker);
        //        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        //        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
        //        //跳动的动画
        //        // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        //    });
        //    localSearch.search(keyword);
        //}

    </script>
    <style>
        .menu
        {
            height: 8%;
            display: block;
            position: absolute;
            top: 85%;
            width: 100%;
            z-index: 100;
        }
        
        .map_container
        {
            position: absolute;
            margin-top: 85px;
            width: 99%;
            height: 85%;
            top: 0px;
            border: 1px solid gray;
            overflow: hidden;
        }
        
        .tabbar
        {
            display: -webkit-box;
            display: -ms-flexbox;
            display: block;
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #f7f7fa;
        }
        
        .tabbar:before
        {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #979797;
            color: #979797;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        
        .tab_bd
        {
            box-sizing: border-box;
            height: 100%;
            padding-bottom: 120px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body style="background: #CBE1FF" onload="init()">
    <div class="page">
        <div>
            <div>
                <div class="weui_cell weui_cell_select weui_select_after">
                    <div class="weui_cell_hd">
                        景区
                    </div>
                    <div class="weui_cell_bd weui_cell_primary" style="background-color: white">
                        <select class="weui_select" id="select" onclick="getselected()">
                            <option value="" selected="selected">选择景区位置</option>
                            <option value="我的位置">我的位置</option>
                            <option value="承德_避暑山庄">避暑山庄</option>
                            <option value="承德_普宁寺">普宁寺</option>
                            <option value="承德_普乐寺">普乐寺</option>
                            <option value="承德_须弥福寿之庙">须弥福寿之庙</option>
                            <option value="承德_普陀宗乘之庙">普陀宗乘之庙</option>
                            <option value="承德_安远庙">安远庙</option>
                            <option value="承德_普佑寺">普佑寺</option>
                            <option value="承德_魁星楼">魁星楼</option>
                            <option value="承德_城隍庙">城隍庙</option>
                            <option value="承德_热河文庙">热河文庙</option>
                            <option value="承德_金山岭长城">金山岭长城</option>
                            <option value="承德_潘家口水下长城">潘家口水下长城</option>
                            <option value="承德_塞罕坝森林公园">塞罕坝森林公园</option>
                            <option value="承德_御道口草原森林">御道口草原森林</option>
                            <option value="承德_木兰围场">木兰围场</option>
                            <option value="承德_京北第一草原">京北第一草原</option>
                            <option value="承德_磬锤峰森林公园">磬锤峰森林公园</option>
                            <option value="承德_塞外蟠龙湖旅游">塞外蟠龙湖旅游</option>
                            <option value="承德_辽河源国家森林公园">辽河源国家森林公园</option>
                            <option value="承德_白云古洞">白云古洞</option>
                            <option value="承德_六里坪九龙潭">六里坪九龙潭</option>
                            <option value="承德_雾灵山">雾灵山</option>
                        </select>
                    </div>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_hd">
                        <label class="weui_label">
                            地点</label></div>
                    <div class="weui_cell_bd weui_cell_primary" style="background-color: white">
                        <input class="weui_input" type="text" id="txtkeyword" placeholder="请输入关键字,如旅馆" style="width: 80%" />
                        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default" style="float: right"
                            onclick="getselectedandregion()">搜索</a>
                    </div>
                </div>
            </div>
            <div id="container" class="map_container">
            </div>
            <div id="PanoContent" style="width: 100%; height: 60%; top: 15%; z-index: 100; position: absolute;
                display: none; border: solid 1px gray">
                <div style="background-color: white">
                    <a id="PanoTitle">选择景区</a>
                    <img src="/images/close.jpg" style="float: right; height: 22px; width: 22px; cursor: pointer"
                        onclick="hidecontent()" />
                </div>
                <div id="PanoCtn" style="width: 100%; height: 100%; position: relative">
                </div>
            </div>
        </div>
        <!--  <div class="tabbar">
              <div class="weui_grids">
                  <a href="/weixin/pano360/Scenic_Spot.aspx?wid={$wid}" class="weui_grid js_grid" data-id="button">
                      <div class="weui_grid_icon">
                          <img src="/modules/cdrt/smart/images/icon_nav_button.png" alt="" />
                      </div>
                      <p class="weui_grid_label">
                          景区名录
                      </p>
                  </a><a href="/weixin/pano360/detail.aspx?wid={$wid}" class="weui_grid js_grid" data-id="cell">
                      <div class="weui_grid_icon">
                          <img src="/modules/cdrt/smart/images/icon_nav_cell.png" alt="" />
                      </div>
                      <p class="weui_grid_label">
                          3D景区
                      </p>
                  </a><a href="/weixin/pano360/scenic_around.aspx?wid={$wid}" class="weui_grid js_grid"
                      data-id="toast">
                      <div class="weui_grid_icon">
                          <img src="/modules/cdrt/smart/images/icon_nav_toast.png" alt="" />
                      </div>
                      <p class="weui_grid_label">
                          景区周边
                      </p>
                  </a>
              </div>
          </div>-->
    </div>
</body>
</html>
